import { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { QuestionCard, QuestionSearch, Pagination } from '@/components';
import styles from '@/assets/css/Common.module.scss';
import { Typography, Empty, Spin } from 'antd';
import useLoadQuestionList from '@/hooks/useLoadQuestionList';

const { Title } = Typography;
interface IProps {
  children?: ReactNode;
}

const Star: FC<IProps> = () => {
  const { data, loading } = useLoadQuestionList({ isStar: true });
  const { list = [], total = 0 } = data || {};
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <QuestionSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading ? (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        ) : list.length === 0 ? (
          <Empty description="暂无数据" />
        ) : (
          list.length > 0 &&
          list.map((q: any) => {
            return <QuestionCard key={q._id} {...q} />;
          })
        )}
      </div>
      <div className={styles.footer}>
        <Pagination total={total} />
      </div>
    </>
  );
};

export default memo(Star);
